import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
// 导入的时候加{}，导出的时候会报错
import {
  Card,
  Alert,
  Typography,
  Button,
  Descriptions,
  Avatar,
  Modal,
  Form,
  Input,
  Select,
  Table,
  Tag,
  Space,
  Radio,
  Tooltip,
  Popover,
} from 'antd';
import ResourceCard from '@/components/ResourceCard';
import { currentUser, updateInfo } from '@/services/ant-design-pro/user';
import TagList from '@/components/TagList';
import { EditOutlined } from '@ant-design/icons';
import { getLinks, getTags } from '@/services/ant-design-pro/links';
import { getAdminLinks, updateLinks } from '@/services/ant-design-pro/admin';
import ColumnGroup from 'antd/lib/table/ColumnGroup';
import Column from 'antd/lib/table/Column';

const Admin = () => {
  const [loading, setLoading] = useState(false);
  const [resources, setResources] = useState([]);

  useEffect(() => {
    if (loading === false) {
      requestAdminLinks();
      setLoading(true);
    }
  }, [resources]);

  // 请求所有资源
  const requestAdminLinks = async (values) => {
    try {
      const res = await getAdminLinks({ ...values });
      setResources(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  // 改变状态
  const changeStatus = async (record, value) => {
    const values = {
      id: record.id,
      status: value,
    };
    try {
      const res = await updateLinks({ ...values });
      setResources([]);
      requestAdminLinks();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <PageContainer>
        <Table dataSource={resources} rowKey={(record) => record.id}>
          <Column title="名称" dataIndex="name" key="name" />
          <Column title="资源链接" dataIndex="url" key="url" render={(text) => <a>{text}</a>} />
          <Column title="资源简介" dataIndex="desc" key="desc" />
          <Column
            title="技术方向"
            dataIndex="tags"
            key="tags"
            width={150}
            render={(text, record, index) => (
              <>
                {record.tips.map((tag) => (
                  <Tag color="blue" key={tag.id}>
                    {tag.tip}
                  </Tag>
                ))}
              </>
            )}
          />
          <Column
            title="审核状态"
            fixed="right"
            width={100}
            render={(text, record, index) => {
              return (
                <Space size="middle">
                  <Popover
                    content={
                      <div>
                        <a>
                          <Tag
                            color="blue"
                            onClick={() => {
                              changeStatus(record, 1);
                            }}
                          >
                            审核中
                          </Tag>
                        </a>
                        <a>
                          <Tag
                            color="green"
                            onClick={() => {
                              changeStatus(record, 2);
                            }}
                          >
                            通过
                          </Tag>
                        </a>
                        <a>
                          <Tag
                            color="red"
                            onClick={() => {
                              changeStatus(record, 3);
                            }}
                          >
                            不通过
                          </Tag>
                        </a>
                      </div>
                    }
                    title="选择更新状态"
                  >
                    {record.status === 1 ? <Tag color="blue">审核中</Tag> : ''}
                    {record.status === 2 ? <Tag color="green">通过</Tag> : ''}
                    {record.status === 3 ? <Tag color="red">不通过</Tag> : ''}
                  </Popover>
                  {/* <Button
                    onClick={() => {
                      console.log(record);
                    }}
                  >
                    123
                  </Button> */}
                </Space>
              );
            }}
          />
        </Table>
      </PageContainer>
    </div>
  );
};

export default Admin;
